<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

    <title>违法学习</title>
    <link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/1.0.2/weui.min.css"/>

    <style>

        .page {
            background-color: #F8F8F8;
        }

        .page__hd {
            padding: 10px;
        }

        .hide {
            display: none;
        }

        .right_answer {
            color: #FF0000;
            font-weight: bold;
            font-size: 24px;
        }

    </style>

</head>
<body>
<div class="container">
    <div class="page">
        <div class="page__hd">
        </div>
        <div class="page__bd">
            <article class="weui-article">
                <h2 class="title">
                    <?= $q->question ?>
                </h2>
                <p class="right_answer hide">正确答案：<?= $q->answer ?></p>
            </article>

            <div class="weui-cells weui-cells_checkbox">
                <label class="weui-cell weui-check__label <?= $q->a ? '' : 'hide' ?>" for="s11">
                    <div class="weui-cell__hd">
                        <input type="checkbox" class="weui-check" name="A" id="s11">
                        <i class="weui-icon-checked"></i>
                    </div>
                    <div class="weui-cell__bd">
                        <p><?= $q->a ?> </p>
                    </div>
                </label>

                <label class="weui-cell weui-check__label <?= $q->b ? '' : 'hide' ?>" for="s12">
                    <div class="weui-cell__hd">
                        <input type="checkbox" class="weui-check" name="B" id="s12">
                        <i class="weui-icon-checked"></i>
                    </div>
                    <div class="weui-cell__bd">
                        <p><?= $q->b ?> </p>
                    </div>
                </label>

                <label class="weui-cell weui-check__label <?= $q->c ? '' : 'hide' ?>" for="s13">
                    <div class="weui-cell__hd">
                        <input type="checkbox" class="weui-check" name="C" id="s13">
                        <i class="weui-icon-checked"></i>
                    </div>
                    <div class="weui-cell__bd">
                        <p><?= $q->c ?> </p>
                    </div>
                </label>

                <label class="weui-cell weui-check__label <?= $q->d ? '' : 'hide' ?>" for="s14">
                    <div class="weui-cell__hd">
                        <input type="checkbox" class="weui-check" name="D" id="s14">
                        <i class="weui-icon-checked"></i>
                    </div>
                    <div class="weui-cell__bd">
                        <p><?= $q->d ?> </p>
                    </div>
                </label>
            </div>

            <div class="weui-btn-area">
                <button class="weui-btn weui-btn_primary" id="submit">
                    <?php if (empty($next)) {
                        echo '完成';
                    } else {
                        echo '下一题';
                    } ?></button>
            </div>

            <div style="display: none;" id="dialog_alert">
                <div class="weui-mask"></div>
                <div class="weui-dialog">
                    <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
                    <div class="weui-dialog__bd">弹窗内容，告知当前页面信息等</div>
                    <div class="weui-dialog__ft">
                        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
                    </div>
                </div>
            </div>

            <div id="toast_loading" style="display:none;">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-loading weui-icon_toast"></i>
                    <p class="weui-toast__content">数据加载中</p>
                </div>
            </div>


        </div>
    </div>
</div>

<script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script>
    var c = 5;
    var t;

    function timedCount() {

        $("#submit").prop('disabled', true);
        $("#submit").attr('class', "weui-btn weui-btn_default");
        $("#submit").text("回答错误，请稍等" + c + "秒后重试");
        c = c - 1
        if (c > 0) {
            t = setTimeout("timedCount()", 1000)
        }
        else {
            stopCount();
        }
    }

    function stopCount() {
        clearTimeout(t)

        $("#submit").prop('disabled', false);
        $("#submit").attr('class', "weui-btn weui-btn_primary");
        $("#submit").text("<?php if (empty($next)) {
            echo '完成';
        } else {
            echo '下一题';
        } ?>");
    }

    $("#submit").click(function () {
        var answer = '';
        $(".weui-check").each(function () {
            if ($(this).is(':checked')) {
                answer += $(this).attr("name");
            }
        });

        if (answer.length == 0) {
            $("#dialog_alert .weui-dialog__title").text("提示");
            $("#dialog_alert .weui-dialog__bd").text("请选择正确答案");
            $("#dialog_alert").fadeIn(200);
            return;
        }


        if (answer == '<?=$q->answer?>') {
            window.location.href = "/wx/wzks/<?= $next ?>";
        }
        else {
            $(".right_answer").show();
            c = 5;
            timedCount();
        }
    });

    $('#dialog_alert .weui-dialog__btn').click(function () {
        $("#dialog_alert").fadeOut(200);
    });
    ///
</script>

</body>
</html>